import * as React from 'react';
// import classnames from 'classnames';
import UserHeader from '@/commonComponents/userHeader/index';
import { useNavigate } from 'react-router-dom';
import './index.module.scss';
import AvatarImg from './avatar.svg';
import { getToken } from '@/utils/localStorge';
interface AvatarProps {
  userInfo: {
    avatar: string;
    username: string;
    token: string;
  };
}
export default function Avatar(props: AvatarProps) {
  const navigate = useNavigate();
  const token = getToken();
  const { avatar, username } = props.userInfo;
  const handerClick = () => {
    navigate('/login');
  };
  const onSetting = () => {
    navigate('/setting');
  };
  return (
    <div styleName={token ? 'avatar-detail login' : 'avatar-detail unlogin'}>
      {token ? (
        <UserHeader
          onSetting={onSetting}
          avatar={avatar}
          username={username}
          token={token}
        />
      ) : (
        <>
          <div onClick={() => handerClick()}>
            <AvatarImg />
          </div>
          <div styleName="unlogin-notice" onClick={() => handerClick()}>
            登录/注册
          </div>
        </>
      )}
    </div>
  );
}
